<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <meta HTTP-EQUIV="Pragma" CONTENT="no-cache" />
  <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache" />
  <meta HTTP-EQUIV="Expires" CONTENT="0" />
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <meta name="description" content="CSS3 resize 拖拽">
  <meta name="keywords" content="CSS3 resize 拖拽">
  <meta name="author" content="Xzavier">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="Shortcut Icon" href="https://xiaohuazheng.github.io/img/favicon.ico" />
  <title>CSS3-resize拖拽</title>
  <style type="text/css">
    body {
      margin: 0;
    }

    h3 {
      padding: 20px 0 0 20px;
      margin: 0;
    }

    .fl {
      float: left;
    }

    .resize-box {
      overflow: hidden;
      background: #f5f5f5;
    }

    .resize-box-left {
      height: 340px;
      position: relative;
    }

    .resize-box-vertical {
      position: relative;
    }

    .l-container {
      background: #fff;
      height: 100%;
      width: 100%;
    }

    .resize-box-right {
      height: 300px;
      padding: 20px;
      overflow: hidden;
    }

    .r-container {
      background: #fff;
      height: 100%;
      width: 100%;
    }

    .resize-real-box {
      position: absolute;
      top: 20px;
      left: 20px;
      bottom: 20px;
      right: 20px;
      overflow-x: hidden;
    }

    .textarea-box {
      padding: 20px;
      overflow: hidden;
    }

    .textarea-box textarea {
      max-width: 200px;
      max-height: 200px;
    }

    .resize-bar {
      width: 100%;
      height: inherit;
      opacity: 0;
      overflow: scroll;
    }

    .horizontal {
      resize: horizontal;
      cursor: col-resize;
    }

    .vertical {
      resize: vertical;
      cursor: row-resize;
    }

    .limit-horizontal {
      min-width: 200px;
      max-width: 800px;
    }

    .limit-vertical {
      min-height: 100px;
      max-height: 300px;
    }

    .dividing-line-horizontal {
      position: absolute;
      right: 0;
      top: 20px;
      bottom: 20px;
      border-left: 1px solid #ddd;
      pointer-events: none;
    }

    .horizontal:hover~.dividing-line-horizontal,
    .horizontal:active~.dividing-line-horizontal {
      border-left: 1px dashed skyblue;
    }

    .horizontal::-webkit-scrollbar {
      width: 20px;
      height: inherit;
    }

    .dividing-line-vertical {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      border-bottom: 1px solid #ddd;
      pointer-events: none;
    }

    .vertical:hover~.dividing-line-vertical,
    .vertical:active~.dividing-line-vertical {
      border-bottom: 1px dashed skyblue;
    }

    .vertical::-webkit-scrollbar {
      width: 100%;
      height: 20px;
    }
  </style>
</head>

<body>
  <h3>resize: horizontal</h3>
  <div class="resize-box" style="margin-top: 20px;">
    <div class="resize-box-left fl">
      <div class="resize-bar horizontal limit-horizontal"></div>
      <div class="dividing-line-horizontal"></div>
      <div class="resize-real-box">
        <div class="l-container"></div>
      </div>
    </div>
    <div class="resize-box-right">
      <div class="r-container">
        <div class="textarea-box">
          <textarea></textarea>
        </div>
      </div>
    </div>
  </div>
  <h3>resize: vertical</h3>
  <div class="resize-box" style="margin-top: 20px;">
    <div class="resize-box-vertical">
      <div class="resize-bar vertical limit-vertical"></div>
      <div class="dividing-line-vertical"></div>
      <div class="resize-real-box">
        <div class="l-container"></div>
      </div>
    </div>
  </div>

</body>

</html>